<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.main{
			display: flex;
			flex-direction: column;
			color: #ffffff;
		}
		.top{
			display: flex;
		}
		.left{
			width: 25%;
		}
		span{background-color: #555555;display: inline-block;width: 100%;text-align: center;padding: 10px 0;}
		.right{
			flex: 1;
			margin-left: 10px;
			background-color: #e2e2e2;
		}
		p{
			display: flex;
			align-items: center;
		}
		.text{
			width: 50px;
		}
		.range{
			width: 100px;
			margin-left: 20px;
		}
		b{
			color: #000;
		}
		.box{
			width: 500px;
			height: 100px;
			border-radius: 20px;
			background-color: #fff;
			margin: 30px auto 0;
		}
		.code{
			margin-top: 20px;
			color: #000;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="top">
			<div class="left">
				<span>设置</span>
				<p>
					<b>水平位移(px)：</b>
					<input id="xval"  type="range" min="-10" max="10" value="2" class="range" oninput="getXval()" onchange="getXval()"><b id="x">2</b>
				</p>
				<p>
					<b>垂直位移(px)：</b>
					<input id="yval"  type="range" min="-10" max="10" value="2" class="range" oninput="getYval()" onchange="getYval()"><b id="y">2</b>
				</p>
				<p>
					<b>模糊半径(px)：</b>
					<input id="rval"  type="range" min="-10" max="10" value="2" class="range" oninput="getRval()" onchange="getRval()"><b id="r">2</b>
				</p>
				<p>
					<b>颜色选择：</b>
					<input id="color" type="color" value="#000000" id="color" onchange="colorchange()" /><b id="c">#000000</b>
				</p>
				
			</div>
			<div class="right">
				<span>效果</span>
				<div class="box">
					
				</div>
			</div>
		</div>
		<div class="content">
			<span>代码</span>
			<div class="code">

			</div>
		</div>
	</div>
	<script type='text/javascript'>
		let x = '2'
		let y = '2'
		let r = '2'
		let color = '#000000'
		function getXval (event) {
    	let value = document.getElementById('xval').value
			document.getElementById('x').innerHTML=value
			x = value
			setShadow()
  	}
		function getYval (event) {
    	let value = document.getElementById('yval').value
			document.getElementById('y').innerHTML=value
			y = value
			setShadow()
  	}
		function getRval (event) {
    	let value = document.getElementById('rval').value
			document.getElementById('r').innerHTML=value
			r = value
			setShadow()
  	}
		function colorchange(event){
			let value = document.getElementById('color').value
			document.getElementById('c').innerHTML=value
			color = value
			setShadow()
		}

		function setShadow(){
			let box = document.getElementsByClassName('box')[0]
			box.style.boxShadow = `${x}px ${y}px ${r}px ${color}`
			document.getElementsByClassName('code')[0].innerHTML = `box-shadow:${x}px ${y}px ${r}px ${color};`
		}
		setShadow()
	</script>
</body>
</html>